// 自定义控件可以继承html 控件，亦可以不继承
// 示例中继承div 元素
class CustomElement extends HTMLDivElement{
    constructor(){
        // 必须调用super 在this 之前
        // 这里调用super ，则在define 中必须使用extends 指定要继承的元素
        super()
         // 元素的功能代码写在这里
    }
}

// customElements 实现了CustomElementRegistry 接口
// define 定义元素
//@param name {string} 组件名称
//@param constructor {new} 带有构造函数的对象
//@param options {object} ElementDefinitionOptions={extends:string} 继承的html 对象
customElements.define('custom-element',CustomElement,{extends:"div"})

class CustomTest extends HTMLElement{
    // Specify observed attributes so that
  // attributeChangedCallback will work
  static get observedAttributes() {
    return ['data-color', 'data-text'];
  }
    // 当 custom element首次被插入文档DOM时，被调用
    connectedCallback(){
        this.innerHTML="test 生命周期"
    }
    // 当 custom element从文档DOM中删除时，被调用
    disconnectedCallback(){
        console.log("delete")
    }
    // 当 custom element增加、删除、修改自身属性时，被调用
    attributeChangedCallback(name, oldValue, newValue){
        console.log("change")
        console.log("name=",name)
        console.log("oldvalue=",oldValue)
        console.log("newvalue=",newValue)
    }
    //当 custom element被移动到新的文档时，被调用
    adoptedCallback() {
        console.log("移动到新的文档中")
    }
}

customElements.define('custom-test',CustomTest)